Обычно разработчики полностью уверены в скорости разрабатываемого сайта. У них сайт загружается быстро, всегда и со всех устройств. Но у реальных пользователей картина обычно другая: сайт медленный, неповоротливый и тормознутый. И хотя все оценки скорости — Google PageSpeed, YSlow и GTMetrix — давно зашкаливают, сайт все равно открывается долго. Что же с этим можно сделать?
Navigation Timing API — следующий шаг в ускорении сайта после выполнения очевидных советов. Сейчас его поддерживают уже более 80% браузеров, этого более чем достаточно для принятия конкретных решений по скорости сайта. Что нам дает Navigation Timing API? В первую очередь, это с десяток метрик по загрузке веб-страницы в браузере пользователя — DNS, соединение, SSL, ожидание сервера, загрузка данных, DOMReady и полная загрузка. На основании этих данных построено большое количество инструментов по анализу скорости сайта — включая Яндекс.Метрику, Google Analytics, Openstat, Pingdom, mPulse, Boomerang, наш Айри.рф и так далее. Даже есть решение в качестве плагина к браузеру — Performance Analyser — позволяющее получить сводку аналитической информации по уже загруженной странице. И конечно — это всем известная диаграмма загрузки, основной инструмент аналитики скорости. Такую диаграмму загрузки сейчас предоставляют все инструменты разработчика в браузере и сервис WebPageTest.org.
Одним словом, это направление клиентской разработки можно назвать RUM — Real User Monitoring. Я называю его глубокой аналитикой скорости сайта. На текущий момент почти все указанные инструменты предоставляют лишь поверхностную картину скорости сайта: за какое время, в среднем, ответил сервер, загрузились данные или полностью загрузилась страница. Это можно фильтровать по отдельным страницам, группам страниц, датам, географии, но на основной вопрос — что нужно сделать, чтобы мой сайт стал быстрее у реальных пользователей — это ответ не дает. А иногда нужно понимать, почему в конкретной стране или регионе, в конкретном браузере или на устройствах, в конкретное время суток у пользователей проблемы с загрузкой сайта. Где искать ответ на эти вопросы?
Ответ может дать использовать метода Navigation Timing API getEntries(), который позволяет получить полную сводку задержек для всех объектов, связанных с данной страницей. Как и для любой аналитики, в страницы сайта необходимо добавить небольшой JavaScript-код, который собирает данные, отправляет их на сервера статистики, затем собранные данные анализируются по заданным критериям. Что это дает?
Можно получить задержки по всем типам объектов, которые используются на сайте. Например, мы можете посмотреть, не просто сколько по количеству или по размеру занимают стили на конкретной странице, но сколько времени заняла их загрузка у посетителей сайта. Или сколько времени ушло на загрузку сторонних виджетов. Аналогично можно посмотреть задержки по группа объектов — например, по отдельным плагинам или наборам картинок. Используя реальные данные от пользователей можно узнать, как часто используется клиентский кэш у вас на сайте — и если этот показатель соответствует отношению новые/вернувшиеся посетители по данным статистики, то с кэшем будет все в порядке.
Самое интересное, что можно проверить эффективность всех действий по оптимизации до ее реального применения на рабочем проекте: вы можете узнать, как внедрение серверного кэширования или дополнительного сжатия файлов сократит время загрузки страниц. Как оптимизация изображения может повлиять на полной время загрузки, имеет ли смысл использовать data:URI. И на основании расчета ускорения сайта для реальных пользователей принять решение о внедрении тех или иных скриптов в процесс разработки или публикации сайта. Для команд разработчиков особенно полезен будет подход, когда данные собираются от реальных пользователей, уточняются действия по оптимизации сайта — и затем они внедряются для достижения нужных KPI.
И на сладкое: кто еще крадет время ваших пользователей? Это сторонние виджеты, вставляемые на ваш сайт не вами. Это могут быть прокси-сервера (WiFi точки), вирусы на пользовательских устройствах, расширения к браузерам и так далее. Все они могут внедрить загрузку сторонних объектов, что ухудшит скорость вашего сайта. Но есть решение — заголовок Content-Security-Policy. Его внедрение может быть проблематичным (особенно при частом изменении набора внешних виджетов на сайте), но эффект не заставит себя ждать — вы получите «чистый» сайт для ваших пользователей, на скорость которого будете влиять только вы.